<template>
    <div>
        <h1>撒啊</h1>
        <div class="common-layout">
            <el-container>
                <el-header><SonHeader @add="addHandle"/></el-header>
                <el-main><SonMain :list="list" @finish="changeDad" @del="del" @catch="catchDad"/></el-main>
                <el-footer><SonFooter :list="list" @show="show"></SonFooter></el-footer>
            </el-container>
        </div>
    </div>
</template>
<script>
import SonFooter from '@/components/Todo/SonFooter.vue';
import SonHeader from '@/components/Todo/SonHeader.vue';
import SonMain from '@/components/Todo/SonMain.vue';

export default {
    components:{
        SonHeader,
        SonMain,
        SonFooter
    },
    data() {
        return {
            list:[{id:'001',content:'学习第1章',state:false,startDate:'2024-9-10',finishDate:''},
                  {id:'002',content:'学习第2章',state:false,startDate:'2024-10-10',finishDate:''}
            ],
            now:new Date(),
            copList:[]
        }
    },
    created(){
        this.copList=this.list.slice()
    },
    methods:{
        addHandle(val){
            this.list.push({
                id:+new Date(),
                content:val,
                state:false,
                startDate:this.fomateDate,
                finishDate:''
            })
            this.copList=this.list.slice()
        },
        changeDad(i){
            this.list[i].finishDate=this.fomateDate
            this.copList=this.list.slice()
        },
        catchDad(i){
            this.list1[i].state=false
            this.copList=this.list.slice()
        },
        del(i){
            this.list.splice(i,1)
            this.copList=this.list.slice()
        },
        show(flag){
            if(flag=='clear'){
                this.list=[]
                this.copList=[]
            }else if(flag=='done'){
                this.list=this.copList.filter(v=>v.state==true)
            }else if(flag=='undo'){
                this.list=this.copList.filter(v=>v.state==false)
            }else{
                this.list=this.copList.slice()
            }
        }
    },
    computed:{
        fomateDate(){
            let month=this.now.getMonth()+1
            return this.now.getFullYear()+'-'+month+'-'+this.now.getDate()
        }
    }
}
</script>
<style>
#app{
    width: 800px;
    margin: auto;
}
</style>